<!-- Dom模板 -->
<template>
  <div class="pointsBox">
    <!-- Dom内容 -->
    <div class="top">
      <div>
        <i class="iconfont" @click="points_btn()">&#xe641;</i>
      </div>
      <div class="num">
        <h3>我的积分</h3>
      </div>
      <div class="iconList">
        <i class="iconfont">&#xe6d3;</i> | <i class="iconfont">&#xe501;</i>
      </div>
    </div>
    <div class="mian">
      <div class="big">
        <div class="small">
          <div class="small_center">
            <p class="zi_bai">5522</p>
            <p class="small_points">当前你的积分</p>
          </div>
        </div>
      </div>
      <h4 @click="integral_btn()">积分商城</h4>
      <p class="time_p">用餐合计38次，默认显示最近一个月的时间</p>
      <button class="timeBtn">请选择时间段</button>
    </div>
    <div class="money_footer">
      <h4>零钱明细</h4>
      <div class="footer_content">
        <div class="footer_center">
          <div class="left">
            <p>大盘鸡餐饮店</p>
            <span>鸡蛋+面包+牛奶</span>
          </div>
          <div class="right">
            <p>2020/06/19</p>
            <span> <i>+</i> 5</span>
          </div>
        </div>
      </div>
      <div class="footer_content">
        <div class="footer_center">
          <div class="left">
            <p>大盘鸡餐饮店</p>
            <span>鸡蛋+面包+牛奶</span>
          </div>
          <div class="right">
            <p>2020/06/19</p>
            <span> <i>+</i> 5</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    integral_btn() {
      this.$router.push("/integral");
    },
    points_btn() {
      this.$router.push("/my");
    },
  },
};
</script>

<style scoped>
@import url("../../assets/fonts1/iconfont.css");

.pointsBox {
  width: 100%;
  height: calc(100vh - 50px);
  padding: 0 10px;
  overflow: auto;
}
.top {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  /* background: #ccc; */
  display: flex;
  justify-content: space-between;
}
.iconList {
  width: 100px;
  height: 30px;
  background: grey;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  text-align: center;
}
h3 {
  margin-left: 60px;
}
.mian {
  width: 100%;
  margin-top: 40px;
  text-align: center;
}
.big {
  width: 150px;
  height: 150px;
  background: #ccc;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 120px;
}
.small {
  width: 120px;
  height: 120px;
  background: blue;
  border-radius: 50%;
}

.small_center .zi_bai {
  margin-top: 25px;
  color: white;
  font-size: 20px;
  font-weight: 900;
}
.small_center .small_points {
  margin-top: 15px;
  font-size: 14px;
}
.small .small_center p {
  color: #ccc;
}
.mian h4 {
  margin-top: 10px;
  color: red;
}
.time_p {
  margin-top: 5px;
  color: #ccc;
}
.timeBtn {
  width: 180px;
  height: 45px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: skyblue;
  color: white;
  margin-top: 15px;
  outline: none;
}
.money_footer {
  width: 100%;
  margin-top: 40px;
}
/* .footer_content h4{
    margin-top: 10px;
    border-bottom: 1px solid skyblue;
} */
.footer_center {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  border-bottom: 1px solid skyblue;
}
.footer_center .left p {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 5px;
  color: black;
}
.footer_center .left span {
  color: #ccc;
}
.footer_center .right span {
  font-size: 35px;
  color: skyblue;
}
.money_footer .footer_center .right span i {
  color: black;
  font-size: 16px;
}
</style>